import React from 'react';
import './css/payOrder.less';
import http from '../../utils/http';
import QRCode from 'qrcode.react';
// 将url转换为二维码 
import Modal from '../components/Modal2'
import { Toast } from '../components/Toast';

const queryString = require('query-string');

let classTimes = ''
// let totalClass = 0
let orderId
class PayOrder extends React.Component {
  state = {
    orderInfo: {
      orderClassVo: {}
    },
    payType: 1,
    promptlyPay:'',
    tdShow:false,//是否显示模态框
    evaluation:"",
    isfailure:false //支付是否失败

  }
  // 获取详情信息
  getOrder = (orderId) => {
    http
      .get('/product/find/productInfo', {
        params: {
          orderId
        }
      })
      .then(data => {
        this.setState({
          orderInfo: data
        })
      }, err => {
      })
  }
  // 查询是否完成 type:1表示查询完成后要调用是否购买
  getPay = (type) => {
    http
    .get('/pay/find/PayStatus', {params: {orderId}})
    .then(data => {
      if (data) {
        if (type === 1) {
          Toast('该订单已支付完成!', 'toast-top')
        } else {
          this.props.history.push('/admin/adminIndex/')
        }
      } else {
        if (type === 1) {
          this.isBuy()
        } else {
          this.setState({isfailure:true})
        }
        // alert('支付失败')
      }
    }, err => {
      
    })
  }
  // 是否购买
  isBuy = () => {
    const payType = this.state.payType
    const data = {
      orderId,
      payType
    }
    http
    .post('/pay/promptlyPay', data)
    .then(data => {
      // 体验课要加购买过一次判断
      this.setState({isfailure:false}) //不显示支付失败
      if(data && !data.isBuyed && data.payUrl){
        if (payType === 1) {
          this.setState({
            promptlyPay: data.payUrl,
            isShowPay: true
          })
        }
      } else {
        // 提示已购买体验课longhai
        this.setState({
          tdShow:true, 
          evaluation:'已购买过体验课'
        })
        // alert('已购买过体验课')
      }
    }, err => {
      
    })
  }
  // 确认支付
  createPay = () => {
    const payType = this.state.payType
    if (payType) {
      // 先查询是否支付,支付过提示不让支付,没支付过再判断是否购买过并查询出支付二维码
      this.getPay(1)
    } else {
       // 提示选择合适的支付方式
      this.setState({
        tdShow:true, 
        evaluation:'请您选择喜欢的支付方式'
      })
    }
  }
  // 支付方式切换
  payChange = (payType) => {
    this.setState({payType})
  }
  getOrder = (orderId) => {
    http
    .get('/order/find/order', {params: {orderId}})
    .then(data => {
      const timeList = data.timeBuckets || []
      const timeArr = []
      timeList.map((item, index) => {
        timeArr.push(item.timeVal)
        return timeArr
      })
      classTimes = timeArr.join(' ')
      // totalClass = data.classNumber + data.giveClassNumber
      this.setState({
        orderInfo: data
      })
    }, err => {
      
    })
  }
  
  // 初始化加载钩子
  componentDidMount() {
    const search = queryString.parse(this.props.location.search)
    orderId = search.orderid
    this.getOrder(orderId)
  }

  // 取消弹出框事件
  notshowEvaluation= () => {
    this.setState({tdShow: false});
  }
  render() {
    return (
      <div className="row pay-order">
        <div className="top">
          <span className="back col-md-1" style={{padding:0}} onClick={(e)=>{
              e.target.src = require('../../images/icon/back_active.png');
              window.history.back();
            }}>
            <img alt='' className="back-normal" src={require('../../images/icon/back_normal.png')}/>
            <img alt='' className="back-hover" src={require('../../images/icon/back_hover.png')}/>
          </span>
          <span className="title col-md-11"style={{paddingRight:'70px'}}>订单信息</span>
        </div>
        <div className="title-small col-xs-12">课程信息</div>
        <div className="line col-md-12"/>
        <div className="form-horizontal">
        <div className="col-xs-12">
          <div className="col-md-9 col-xs-12 classType">
              <div className="form-group">
                <label className="col-md-2 col-xs-12 control-label title-label">课程类型</label>
                <div className="col-xs-9">
                  <p className="form-control-static class-time">{this.state.orderInfo.productName}</p>
                </div>
              </div>
              <div className="form-group">
                <label className="col-md-2 col-xs-12 control-label title-label">上课时间</label>
                <div className="col-xs-9">
                  <p className="form-control-static class-time">{this.state.orderInfo.dayBuckets && this.state.orderInfo.dayBuckets.dayVal}({classTimes})</p>
                </div>
              </div>
              <div className="form-group">
                <label className="col-md-2 col-xs-12 control-label title-label">包含课时</label>
                <div className="col-xs-9">
                  <p className="form-control-static class-time">{this.state.orderInfo.hourDesc}</p>
                </div>
              </div>
          </div>
          <div className="col-md-3 col-xs-12">
            <div className="form-group" style={{margin:'70px 0'}}>
              <div className="col-md-12">
                <p className="form-control-static class-price">课程价格 ¥{this.state.orderInfo.productPrice}</p>
              </div>
             </div>
          </div>
        </div>
          <div className="title-small col-xs-12">订单结算</div>
          <div className="form-group">
            <div className="col-md-3 col-xs-12 col-md-offset-9">
              <p className="form-control-static class-price"  style={{lineHeight:"80px",padding:"0 0 0 8px"}}>仍需支付 ¥{this.state.orderInfo.needsPrice}</p>
            </div>
          </div>
          <div className="title-small col-xs-12">支付方式</div>
          <div className="line col-md-12"/>
          <div className="form-group">
            <div className="col-md-8 col-xs-12 col-xs-offset-1" style={{padding:0}}>
              <div className="radio">
                <label className="col-md-6 col-xs-12" style={{padding:0}}>
                  <input type="radio" className="radioClass" defaultChecked="true" name="payType" onClick={() => this.payChange(1)}/>
                  {
                    this.state.payType === 1?<img src={require('../../images/icon/full-all.png')} style={{width:"16px",height:"16px"}} alt=""/>:
                    <img src={require('../../images/icon/full.png')} style={{width:"16px",height:"16px"}} alt=""/>
                  }
                  <span className="title-label"  style={{color:"#26AB2C"}}>微信支付</span>
                </label>
                {/* <label className="col-md-6 col-xs-12">
                  <input type="radio" name="payType" onClick={() => this.payChange(2)}/>
                  <span className="title-label" style={{color:this.state.payType===2?'#26A1E7':'#26AB2C'}}>支付宝</span>
                </label> */}
              </div>
            </div>
            <div className="col-md-3 col-xs-12 class-price" style={{lineHeight:"84px",padding:"0 0 0 20px"}}>支付金额 ¥{this.state.orderInfo.payPrice}</div>
          </div>
          <div className="line col-md-12"/>
          <div className="footer">
            <button className="col-md-6 col-xs-12 col-md-offset-3 btn-reset btn-save" onClick={this.createPay}>立即购买</button>
            {
              this.state.isShowPay?
                          <Modal>
                             <header className="modal-header modal-header-l">  
                             <div className="h2-text">微信支付                   
                                 <button type="button" className="close-X" onClick={()=>{
                                    this.setState({
                                        isShowPay:!this.state.isShowPay
                                    })
                                }}><img src={require('../../images/XX.png')} alt=""/></button>
                             </div>  
                             </header>  
                             <div className="modal-body modal-code">  
                               <p className="p">扫一扫付款(元)</p>
                                 <span>{this.state.orderInfo.needsPrice}</span>
                                 <div className="code-dig" style={{padding:"10px"}}>
                                   <QRCode value={this.state.promptlyPay}/>
                                   <div>
                                     <i style={{verticalAlign:"top",marginTop:'10px'}}><img src={require('../../images/icon/code.png')} alt=''/></i>
                                     <span>打开微信去支付扫一扫继续付款</span>
                                   </div>
                               </div>
                               {this.state.isfailure?
                                     <p style={{fontSize:16,paddingTop:10,color:"red"}}> 还未支付，请重试！</p>:""
                                   }
                             </div> 
                            <div className="text-center"><button className="btn btn-save" style={{color:"#FFF",outline:"none"}} onClick={this.getPay}>完成</button></div>
                          </Modal>:''
            }
            
            {
            // 选择支付方式模态框
            this.state.tdShow?<Modal >
                                  <div>
                                    <header className="modal-header">  
                                        <h4>贴心小提示：</h4>  
                                        <span className="close"
                                            onClick={()=>{
                                                this.setState({
                                                    tdShow:!this.state.tdShow
                                                  })
                                            }}>×</span>  
                                    </header>  
                                    <div className="modal-body">  
                                      <p className="testclass">{this.state.evaluation}</p>
                                    </div>  
                                    <footer className="modal-footer">  
                                      <button className="cancel" onClick={this.notshowEvaluation}>取消</button>  
                                       
                                    </footer>  
                                  </div>
                              </Modal>:''
           }  
          </div>
        </div>
      </div>
    );
  }
}
export default PayOrder;